HTML5 และ CSS3 ตอน จุดเด่นของ HTML5
ว่ากันด้วยเรื่องจุดเด่นของ HTML5 ล้วนๆ
1.Semantic Markup อย่างที่ผมอธิบายในบทความก่อนหน้าแบบสั้นๆว่ามันคือ "ความเป็นมิตรกับผู้ใช้ที่มากกว่าการมองเห็นด้วยสายตา" ผมจะขยายความเพิ่มเติมละกันว่ามันคืออะไร
ในการเขียน HTML แบบเดิม (HTML4) เราจะใช้ tag ตัวเดียวคือ div ในการแบ่งสิ่งต่างๆบนหน้าเว็บ และอาจกำหนด class หรือ id เพื่อบอกว่าส่วนนี้หมายถึงอะไร เช่น
จากโค้ด จะเห็นว่า เราใช้ id เพื่อบอกว่าส่วนต่างๆนั้นหมายถึงอะไร เช่น topmenu หมายถึงเมนูหลักของเว็บ หรือ footer คือ footer ของเว็บ แต่ในทางปฎิบัติมันไม่ได้มีกฎตายตัวว่า ส่วนไหนจะใช้ชื่ออะไร ดังนั้นบางคนอาจใช้ nav หรือ menu แทน topmenu ซึ่งเป็นปัญหากับอุปกรณือื่นๆ เช่น reader สำหรับคนตาบอดที่ต้องแปลความหมายว่าส่วนนี้หมายถึงอะไรเพื่อที่จะได้อ่านได้อย่างถูกต้อง หรือ Search Engine ทั้งหลาย ที่จะมีความสามารถในการแยกแยะเอาข้อมูลออกจากส่วนอื่นๆ
HTML5 ถูกออกแบบมาเพื่อแก้ปัญหานี้ ด้วยการกำหนด tag แบบเฉพาะเจาะจงเพื่อให้อุปกรณ์เหล่านี้สามารถรับรู้ได้ทันทีว่ามันหมายถึงอะไร เช่น
จะเห็นได้ว่า HTML5 จะมี tag ที่สามารถบ่งบอกว่าแต่ละส่วนคืออะไรอย่างชัดเจน ทำให้อุปกรณ์ต่างๆสามารถแยกแยะเนื่อหาได้ถูกต้องแม่นยำมากขึ้น ลดความซับซ้อนของบราวเซอร์ และแน่นอน มันจะเร็วขึ้น และ ประหยัดพลังงานมากขึ้น
2. Form Enhancement เป็นการเพิ่มประสิทธิภาพของฟอร์มที่ทำงานบนเว็บบราวเซอร์ โดยหลักๆแล้วเพื่อเป็นการลดการใช้ Javascript กับฟอร์ม ยกตัวอย่างเช่น HTML5 จะมี input ชนิดต่างๆมากขึ้น เช่น
1.Semantic Markup อย่างที่ผมอธิบายในบทความก่อนหน้าแบบสั้นๆว่ามันคือ "ความเป็นมิตรกับผู้ใช้ที่มากกว่าการมองเห็นด้วยสายตา" ผมจะขยายความเพิ่มเติมละกันว่ามันคืออะไร
ในการเขียน HTML แบบเดิม (HTML4) เราจะใช้ tag ตัวเดียวคือ div ในการแบ่งสิ่งต่างๆบนหน้าเว็บ และอาจกำหนด class หรือ id เพื่อบอกว่าส่วนนี้หมายถึงอะไร เช่น
<div id="topmenu">Menu</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
จากโค้ด จะเห็นว่า เราใช้ id เพื่อบอกว่าส่วนต่างๆนั้นหมายถึงอะไร เช่น topmenu หมายถึงเมนูหลักของเว็บ หรือ footer คือ footer ของเว็บ แต่ในทางปฎิบัติมันไม่ได้มีกฎตายตัวว่า ส่วนไหนจะใช้ชื่ออะไร ดังนั้นบางคนอาจใช้ nav หรือ menu แทน topmenu ซึ่งเป็นปัญหากับอุปกรณือื่นๆ เช่น reader สำหรับคนตาบอดที่ต้องแปลความหมายว่าส่วนนี้หมายถึงอะไรเพื่อที่จะได้อ่านได้อย่างถูกต้อง หรือ Search Engine ทั้งหลาย ที่จะมีความสามารถในการแยกแยะเอาข้อมูลออกจากส่วนอื่นๆ
HTML5 ถูกออกแบบมาเพื่อแก้ปัญหานี้ ด้วยการกำหนด tag แบบเฉพาะเจาะจงเพื่อให้อุปกรณ์เหล่านี้สามารถรับรู้ได้ทันทีว่ามันหมายถึงอะไร เช่น
<nav>Menu</nav>
<article>Content</article>
<footer>Footer</footer>
จะเห็นได้ว่า HTML5 จะมี tag ที่สามารถบ่งบอกว่าแต่ละส่วนคืออะไรอย่างชัดเจน ทำให้อุปกรณ์ต่างๆสามารถแยกแยะเนื่อหาได้ถูกต้องแม่นยำมากขึ้น ลดความซับซ้อนของบราวเซอร์ และแน่นอน มันจะเร็วขึ้น และ ประหยัดพลังงานมากขึ้น
2. Form Enhancement เป็นการเพิ่มประสิทธิภาพของฟอร์มที่ทำงานบนเว็บบราวเซอร์ โดยหลักๆแล้วเพื่อเป็นการลดการใช้ Javascript กับฟอร์ม ยกตัวอย่างเช่น HTML5 จะมี input ชนิดต่างๆมากขึ้น เช่น
<input type="datetime-local">
<input type="color">
<input type="range">